<!-- eslint-disable vue/multi-word-component-names -->
<!-- @Author ： NWJ Version ： 1.0 -->

<template>
  <TopNav></TopNav>
  <!-- 视差组件 -->
  <div class="parallax">
    <img src="@/assets/ShiChaGreen/bc1.png" id="bc1" />
    <img src="@/assets/ShiChaGreen/bc2.png" id="bc2" />
    <img src="@/assets/ShiChaGreen/bc3.png" id="bc3" />
    <img src="@/assets/ShiChaGreen/bc4.png" id="bc4" />
    <img src="@/assets/ShiChaGreen/bc5.png" id="bc5" />
    <img src="@/assets/ShiChaGreen/tree.png" id="tree" />
    <h2 id="text">Smart Locker</h2>
    <img src="@/assets/ShiChaGreen/leaf.png" id="leaf" />
    <img src="@/assets/ShiChaGreen/plant.png" id="plant" />
  </div>
  <!-- 主要内容区域 -->
  <div class="contentBox">
    <div class="content">
      <div class="express-page">
        <!-- 快递柜状态功能 -->
        <el-card class="express-card states-card">
          <div class="card-header">
            <img src="@/assets/zhuangtai.png" style="width: 32px; height: 32px;">
            <span>快递柜状态</span>
          </div>
          <CabinetStatus :data="cabinetData" />
        </el-card>
        <!-- 快递柜位置 -->
        <el-card class="express-card map-card">
          <div class="card-header">
            <img src="@/assets/dingwei.png" style="width: 32px; height: 32px;">
            <span>当前快递柜位于：</span>
            <!-- 添加下拉选择器 -->
            <el-select
              v-model="selectedCabinetGrpName"
              placeholder="选择柜组"
              style="width: 250px;margin-left: 20px;"
              @change="handleCabinetGrpChange"
            >
              <el-option
                v-for="item in cabinetGrps"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="map">
            <GaodeMap></GaodeMap>
          </div>
        </el-card>
        <!-- 存取按钮 -->
        <button id="cun" class="cq-btn" @click="isCun = true">
          <el-icon><Upload /></el-icon>存件
        </button>
        <button id="qu" class="cq-btn" @click="isQu = true">
          <el-icon><Download /></el-icon>取件
        </button>
        <!-- 存取dialog -->
        <el-dialog v-model="isCun" width="420px" style="user-select: none;" draggable :show-close="false">
          <template #title>
            <div class="custom-title">你正在存件</div>
          </template>
          <ServicesSelect :datas="selectDatas" @change="onChange"></ServicesSelect>
          <input type="number" v-model="quId" id="qu-id">
          <button id="cunBtn" class="submit-btn" @click="onCun">提交</button>
        </el-dialog>
        <el-dialog v-model="isQu" width="420px" style="user-select: none;" draggable :show-close="false">
          <template #title>
            <div class="custom-title">输入取件码</div>
          </template>
          <CodeInput :length="6" @complete="handleCodeComplete" />
          <button id="cunBtn" class="submit-btn" @click="onQu">提交</button>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from '@/components/TopNav'
import CabinetStatus from './common/CabicatState.vue'
import { layout } from '@/utils/layout'
import { filterByWhitelist } from '@/utils/objFormat'
import { showMsg } from '@/utils/showMsg'
import axiosService from '@/utils/request'
import GaodeMap from './common/GaodeMap.vue'
import ServicesSelect from './common/ServicesSelect.vue'
import CodeInput from '@/components/CodeInput.vue'
import axios from 'axios'

export default {
  components: {
    CabinetStatus,
    GaodeMap,
    ServicesSelect,
    CodeInput,
    TopNav
  },

  data()
  {
    return {
      isCun: false,
      isQu: false,
      quId: '',
      quCode: '',
      cabinetData: [],
      cabinetGrps: [], // 存储柜子分组数据
      selectDatas: [],
      targetCabinetId: '',
      selectedCabinetGrpName: '厚德苑' // 选中的柜子分组名称
    }
  },

  created()
  {
    this.init()
    this.fetchCabinetGrps() // 获取柜子分组数据
  },

  mounted()
  {
    this.setupParallax()
  },

  methods: {
    async init()
    {
      try
      {
        const res = await axiosService.get('/node/cabinets/grp/12')
        const getedData = filterByWhitelist(res.data, ['number', 'isclosed', 'state', 'price'])
        this.selectDatas = filterByWhitelist(res.data, ['id', 'isclosed', 'state', 'price', 'belong', 'des', 'number'])
        this.cabinetData = getedData
      }
      catch (err)
      {
        layout(this, 1, err)
      }
    },

    // 获取柜子分组数据
    async fetchCabinetGrps()
    {
      try
      {
        const res = await axiosService.get('/node/cabGrps/map') // 调用接口获取数据
        if (res.code === 0)
          this.cabinetGrps = res.data // 存储柜子分组数据
        else
          showMsg('获取柜子分组失败', res.data.msg, 'error')
      }
      catch (err)
      {
        showMsg('获取柜子分组出错', err, 'error')
      }
    },

    // 处理柜子分组选择变化
    handleCabinetGrpChange(value)
    {
      const cabinet = this.cabinetGrps.find(item => item.value === value)
      axiosService.get(`/node/cabinets/grp/${value}`)
        .then(res =>
        {
          if (res.data.length === 0)
            showMsg(`已切换至${cabinet.label}`, '该站点暂无快递柜信息', 'success')
          else
          {
            this.cabinetData = res.data
            showMsg(`已切换至${cabinet.label}`, null, 'success')
          }
        })
        .catch(e =>
        {
          showMsg('出现错误', e, 'error')
        }
        )
    },

    setupParallax()
    {
      const text = document.getElementById('text')
      const leaf = document.getElementById('leaf')
      const bc1 = document.getElementById('bc1')
      const bc4 = document.getElementById('bc4')
      const bc5 = document.getElementById('bc5')

      window.addEventListener('scroll', () =>
      {
        const value = window.scrollY
        text.style.marginTop = value * 1.5 + 'px'
        leaf.style.top = value * -1.5 + 'px'
        leaf.style.left = value * 1.5 + 'px'
        bc1.style.top = value * 0.5 + 'px'
        bc4.style.left = value * -1.5 + 'px'
        bc5.style.left = value * 1.5 + 'px'
      })
    },

    onChange(selectedId)
    {
      this.targetCabinetId = selectedId
    },

    handleCodeComplete(code)
    {
      this.quCode = code
      showMsg(`验证码输入完成: ${code}`, null, 'success')
    },
    onCun()
    {
      const targetCabinet = this.selectDatas.find(item => item.id === this.targetCabinetId)
      // 操作硬件开门
      axios.post('/node//usart/send', {
        data: `@open@${targetCabinet.number}`
      })
      // 修改对应快递柜信息
      axiosService.post('/node/users/cj', {
        cabinetNum: targetCabinet.number,
        cunId: this.$store.state.user.id,
        quId: this.quId,
        cabinetBelong: targetCabinet.belong
      })
        .then(res =>
        {
          this.init()
          this.isCun = false
          showMsg(res.data, null, 'success')
        })
        .catch(e =>
        {
          this.isCun = false
          showMsg(e, null, 'error')
        })
    },
    onQu()
    {
      axiosService.post(`/node/users/qj/${this.quCode}`)
        .then(res =>
        {
          this.isQu = false
          this.init()
          showMsg(res.data, null, 'success')
          // 操作硬件开门
          axios.post('/node//usart/send', {
            data: `@open@${res.data.slice(0, 1)}`
          })
        })
        .catch(e =>
        {
          this.isQu = false
          this.init()
          showMsg(e, null, 'error')
        })
    }
  }
}
</script>

<style scoped>
.express-page {
  display: grid; /* 使用 CSS Grid 布局 */
  grid-template-columns: repeat(8, 1fr); /* 定义 8 列，每列宽度相等 */
  grid-template-rows: repeat(8, 1fr); /* 定义 8 行，每行高度相等 */
  gap: 20px; /* 设置网格项之间的间距 */
  width: 80vw;
  min-width: 800px;
  user-select: none;
  margin-top: 15px;
  margin-bottom: 15px;
  height: calc(90vh - 30px);
}

.express-card {
  margin-bottom: 20px;
  border-radius: 30px;
  background-color: transparent;
  backdrop-filter: blur(10px);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.3),
    0 -10px 20px rgba(0, 0, 0, 0.3),
    10px 0 20px rgba(0, 0, 0, 0.3),
    -10px 0 20px rgba(0, 0, 0, 0.3);
  border: 0;
  color: #FFF;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.card-header img {
  margin-right: 10px;
}

.states-card {
  grid-area: 1 / 1 / 5 / 4;
}
.map-card {
  grid-area: 1 / 4 / 9 / 9;
}
.cq-btn {
  border-radius: 12px;
  border: 0;
  font-size: 40px;
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: transform 0.3s ease, font-size 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
  position: relative; /* 相对定位，用于阴影效果 */
}
.cq-btn:hover {
  transform: translateY(-5px); /* 向上移动5px，产生浮起效果 */
  font-size: 50px; /* 文字放大10% */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 增大阴影范围，增强浮起效果 */
}
#cun {
  grid-area: 5 / 1 / 7 / 4;
  background-color: #ffcc00;
}
#qu {
  grid-area: 7 / 1 / 9 / 4;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans SC', sans-serif;
}

.parallax {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  user-select: none;
}

.parallax img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

#text {
  position: absolute;
  font-size: 5em;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 10px;
}

.contentBox {
  height: 90vh;
  position: relative;
  background: #425aef url(https://img.meuicat.com/blog/loading_block.3c7dab8c.svg) repeat;
  padding-top: 0;
}

.contentBox .content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 2px;
}

h2 {
  user-select: none;
}

:deep(.el-form-item__label) {
  color: #fff;
}

.el-button {
  display: inline-block;
  visibility: visible;
}
.custom-title {
  font-size: 30px;
  font-weight: 600;
  color: #858585;
  text-align: center;
}
.submit-btn {
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
  user-select: none;
  background-color: #425aef;
  border: 0;
  border-radius: 12px;
  margin-top: 20px;
  color: #fff;
  padding: 4px;
}
.submit-btn:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#qu-id {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  outline: none;
  border: #dcdfe6 solid 1px;
  border-radius: 4px;
  padding: 10px;
  font-size: small;
  line-height: 20px;
  color: #606266;
}
#qu-id:hover {
  border: #425aef solid 1px;
}
</style>
